<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Echarts数据可视化</title>
</head>
<body>
<!--    <div id="pie" style="width: 1000px; height: 800px"></div>-->
<!--    <div style="height: 100px"></div>-->
    <div id="line" style="width: 1000px; height: 800px"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        // const pieChartDom = document.getElementById('pie');
        // const myPieChart = echarts.init(pieChartDom);
        // const pieOption = {
        //     title: {
        //         text: 'Nightingale Chart',
        //         subtext: 'Fake Data',
        //         left: 'center'
        //     },
        //     legend: {
        //         top: 'bottom'
        //     },
        //     toolbox: {
        //         show: true,
        //         feature: {
        //             mark: { show: true },
        //             dataView: { show: true, readOnly: false },
        //             restore: { show: true },
        //             saveAsImage: { show: true }
        //         }
        //     },
        //     series: [
        //         {
        //             name: 'Nightingale Chart',
        //             type: 'pie',
        //             radius: [50, 250],
        //             center: ['50%', '50%'],
        //             roseType: 'area',
        //             itemStyle: {
        //                 borderRadius: 8
        //             },
        //             data: []
        //         }
        //     ]
        // };
        const lineChartDom = document.getElementById('line');
        const myLineChart = echarts.init(lineChartDom);
        const lineOption = {
            title: {
                text: '温度变化曲线图',
                subtext: '数据纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name: 'Highest',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: 'Lowest',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [{ type: 'min', name: '周最低'}]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: 'Avg' },
                            [
                                {
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                },
                                {
                                    symbol: 'circle',
                                    label: {
                                        position: 'start',
                                        formatter: 'Max'
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }
                            ]
                        ]
                    }
                }
            ]
        };
        // fetch("/pie/advertising").then(response => response.json()).then(res => {
        //     res.forEach(item => {
        //         pieOption.series[0].data.push({name: item.name, value: item.count})
        //     })
        //     console.log(pieOption);
        //     myPieChart.setOption(pieOption);
        // })
        fetch("/line/temperature").then(response => response.json()).then(res => {
            lineOption.xAxis.data = res.map(value => value.date);
            lineOption.series[0].data = res.map(value => value.highTemp);
            lineOption.series[1].data = res.map(value => value.lowTemp);
            console.log(lineOption);
            myLineChart.setOption(lineOption);
        })
        setInterval(function(){
            $.ajax({
                url:"/line/temperature",
                type:'GET',
                data:{},
                async: true,
                dataType:"json",

                // 回调函数
                success:function (result) {
                    lineOption.xAxis.data = result.map(value => value.date);
                    lineOption.series[0].data = result.map(value => value.highTemp);
                    lineOption.series[1].data = result.map(value => value.lowTemp);
                    myLineChart.setOption(lineOption);
                },error:function(){
                    console.log("error");
                }
            });

        }, 3000);
    </script>
</body>
</html>